<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>No.4 - 3D 空间的卡片翻转动效</title>
</head>
<body>
<style>
	div{position: relative;margin: 50px auto;width: 250px;height: 350px; perspective:800px;-webkit-perspective:800px;}
	img{position: absolute;transition: transform .7s ease-in-out;}
	.img1{backface-visibility:hidden;}/*背面不可见*/
	.img2{z-index: -1}
	div:hover img{transform: rotateY(180deg);}
</style>
	<div>
		<img class="img1" src="任务四设计稿/正面.jpg" alt="">
		<img class="img2" src="任务四设计稿/反面.jpg" alt="">
	</div>
</body>
</html>